<template>
    <div>
        <div id="vertex">
            <div class="vertex"><!--头顶-->
                <ul class="breadcrumb m-0 p-0 float-right">
                    <li class="breadcrumb-item">
                        <a @click="jumpLogin" class="text-muted" href="javascript:;">登录</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a @click="jumpReg" class="text-muted" href="javascript:;">注册</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container py-0">
            <div class="row mt-3 mx-0"><!--logo+搜索栏+购物车按钮-->
                <div class="col-6 p-0">
                    <img src="http://127.0.0.1:3000/log_03.gif" @click="jumpIndex" alt="">
                </div>
                <div class="searchs col-4 text-right">
                    <input class="search p-2" type="text" placeholder="search..."><a href="javascript:;"><img src="http://127.0.0.1:3000/header1_03.png" alt="搜索"></a>
                </div>
                <div class="col-2 p-0">
                    <ul class="list-unstyled">
                        <li class="text-right mb-2">
                            <img src="http://127.0.0.1:3000/header_phone.png" alt="电话">
                            <span>400 091 2710</span>
                        </li>
                        <li class="shopping" @click="jumpCart">
                            <img class="mr-1" src="http://127.0.0.1:3000/header_shopping.png" alt="">
                            <span>购物车（<a>0</a>）</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="nav"><!--水平导航栏-->
            <ul class="nav mt-3">
                <li class="nav-item">
                    <a class="nav-link py-0 mt-1 text-white" @click="jumpIndex">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-0 mt-1 text-white" href="javascript:;">ID品牌文化</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-0 mt-1 text-white" href="javascript:;">同志单身戒指</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-0 mt-1 text-white" href="javascript:;">同志求婚钻戒</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-0 mt-1 text-white" href="javascript:;">同志爱情对戒</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-0 mt-1 text-white" href="javascript:;">LGBT真爱空间</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-0 mt-1 text-white" href="javascript:;">常见定制问题</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link py-0 mt-1 text-white" href="javascript:;">同性之光</a>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {}
    },

    // mounted(){
    //     if(kw==undefined){
    //         this.kw=this.$route.$params.kw;
    //     }
    // },
    // watch:{
    //     //监控地址栏中的信息
    //     "$route"(){
    //         this.kw=this.$route.params.kw;
    //     }
    // },
    methods:{
        // search(){
        //     this.$router.push(`products/${this.kw}`);
        // },
        jumpCart(){
            //查看购物车操作
            //跳转购物车组件
            this.$router.push("/Cart");
        },
        jumpLogin(){
            //跳转到登录页面
            this.$router.push("/Login");
        },
        jumpReg(){
            //跳转到注册页面
            this.$router.push("/Register");
        },
        jumpIndex(){
            //跳转到官网首页
            this.$router.push("Index");
        }
    }
}
</script>
<style scoped>
/* vertex头顶样式 */
/* 头顶背景色 */
#vertex{
    width: 100%;
    background: #f6f6f6;
}
/**头顶右外边距**/
#vertex .vertex{
    width: 1105px;
    margin:0 auto;
}
/* 头顶div高度坍塌 */
.vertex::after{
    content: "";
    display: table;
    clear: both;
}
/* 调整ul面包屑导航背景色 */
.breadcrumb{
    background: transparent;
}
/* 修改间隔符 */
.breadcrumb-item+.breadcrumb-item::before{
    content:"|";
}
/* 搜索栏 */
.search{
    width:80%;
    height:42px;
    border:1px solid #999;
    border-right: 0px;
    border-radius: 3px 0px 0px 3px;
    margin:30px 0px 0px 0px;

}
/* 搜索栏下的a标签 */
.searchs a{
    border: 1px solid #999;
    border-left:0px;
    border-radius: 0px 3px 3px 0px;
    padding:10.5px 10px;
}
/* 购物车按钮 */
.shopping{
    background: #22abcc;
    padding:10px 0 10px 40px;
}
.shopping span{
    color:#fff;
}
/* 水平导航栏 */
#nav{
    height:33px;width:100%;
    background: #22abcc;
}
#nav .nav{
    width:1080px;
    height:33px;
    margin:0 auto;
}
.nav li a{
    font-size: 1rem;
}    
</style>

